<!-- 详情页面 -->
<template>
  <div>
    <div class="err is-always-shadow box-card">
      <el-row type="flex" class="row-bg" justify="space-between" align="middle">
        <el-col :span="14">
          <div><h1>工单编号: {{ user.customerKey || '--' }}</h1></div>
        </el-col>
        <el-col :span="10" style="text-align: right" v-if="user.workOrderStatus == 0 || user.workOrderStatus == 99">
          <el-button type="primary" @click="showModel">调派</el-button>
<!--          <el-button type="primary" @click="financeFun">财务信息</el-button>-->
        </el-col>
      </el-row>

      <el-row type="flex" class="row-bg" justify="space-between" align="middle">
        <el-col :span="22">
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <span>发起人: {{ user.initiator || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span>发起人电话: {{ user.customerPhone || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span>发起时间: {{ user.customerTimer || '--' }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row type="flex" class="row-bg" justify="space-between" align="middle">
        <el-col :span="16">
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <span style="margin-right: 5px; color:#1890ff">业务类别: {{ user.customerHelp || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span>客户姓名: {{ user.liaison || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span>客户电话: {{ user.liaisonPhone || '--' }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <div style="display: inline-flex;align-items: baseline">
            <span style="margin-right: 10px">状态:</span>
            <dict-tag :options="dict.type.sys_flag" :value="user.workOrderStatus" />
          </div>
        </el-col>
      </el-row>

      <el-row type="flex" class="row-bg" justify="space-between" align="middle">
        <el-col :span="16">
          <el-row type="flex" class="row-bg">
            <el-col :span="10">
              <span v-if="user.receiver" style="color:#39b54a">接单人: {{ user.receiver }}</span>
              <span v-else>接单人: --</span>
            </el-col>
            <el-col :span="7">
              <span v-if="user.theUnitToWhichTheOrderBelongs">服务单位: {{ user.theUnitToWhichTheOrderBelongs }}</span>
              <span v-else>服务单位: --</span>
            </el-col>
            <el-col :span="7">
              <span style="flex: 2">类型: {{ user.assignmentType == '1' ? '自动分配' : '自定义指派'}}</span>
            </el-col>
<!--            <el-col :span="8">-->
<!--              <span style="flex: 2" v-if="user.endTime">完成时间: {{ user.endTime || '&#45;&#45;' }}</span>-->
<!--            </el-col>-->
          </el-row>
        </el-col>
        <el-col :span="8" style="text-align: right" v-if="user.quotationPrice">
          <span style="color: cadetblue;">工单总价: {{ user.quotationPrice }}元</span>
        </el-col>
      </el-row>


    </div>
    <div class="ser">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>流程进度</span>
          </div>
        </template>
        <el-steps :active="active" align-center>
          <el-step
            v-for="item in stepList"
            :title="item.label" :key="item.status"
            :description="user[item.timeKey]"
          />
        </el-steps>
      </el-card>
    </div>

    <div class="CenterBox">
      <div>
        <div>
          <h3>客户信息</h3>
        </div>
        <div>
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="6">
              <span>客户姓名：{{ user.liaison || '&#45;&#45;' }}</span>
            </el-col>
            <el-col :span="9">
              <span style="flex: 2">预约时间：{{ user.appointmentTime}}</span>
            </el-col>
            <el-col :span="9">
              <span style="flex: 2">问题描述：{{ user.customerMessage }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="6">
              <span style="padding-right: 10px;"  @click="editPhone">客户电话：
                <span style="color: #409eff">{{ user.liaisonPhone || '--' }}</span>
              </span>
              <i @click="editPhone" class="el-icon-edit" style="color: #409eff"></i>
            </el-col>
            <el-col :span="12">
              <span>预约地址：{{ user.customerAddress || '--' }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="6">
              <span>发起人：{{ user.initiator || '--' }}</span>
            </el-col>
            <el-col :span="12">
              <span>发起人电话：{{ user.customerPhone || '--' }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle">
            <el-col :span="24">
              <div>
                <span>申请资料：</span>
                <image-or-file v-model="user.applicationMaterial"/>
<!--                <div style="display: inline" v-if="user.applicationMaterial && user.applicationMaterial.length > 6">
                   <span v-for="item in (user.applicationMaterial).split(',')" :key="item">
                      <el-image
                        v-if="item.substring(item.lastIndexOf('.')+1, item.length) == 'png' || item.substring(item.lastIndexOf('.')+1, item.length) == 'jpeg' || item.substring(item.lastIndexOf('.')+1, item.length) == 'jpg'"
                        style="width: 50px; height: 50px;margin-right: 10px"
                        :preview-src-list="[item]"
                        :src="item"/>
                       <span v-else-if="item" style="color: #1890ff">
                         <a :href="item">{{item.substring(item.lastIndexOf('/')+1, item.length)}}，</a>
                       </span>
                   </span>
                </div>-->
              </div>
            </el-col>
          </el-row>
        </div>
        <el-divider/>
      </div>

      <!--   转单信息-->
      <div v-if="user.toReceiveTime">
        <div>
          <h3>转单信息</h3>
        </div>
        <div>
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="8">
              <span>转单人：{{ user.toReceiver }}</span>
            </el-col>
            <el-col :span="8">
              <span>联系电话：{{ user.toAnswerASingleCall }}</span>
            </el-col>
            <el-col :span="8">
              <span>转单时间：{{ user.toReceiveTime }}</span>
            </el-col>

          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle">
            <el-col :span="8">
              <span>所属单位：{{ user.toTheUnitToWhichTheOrderBelongs }}</span>
            </el-col>
            <el-col :span="8">
              <span>所属部门：{{ user.toDepartment1 }}</span>
            </el-col>
          </el-row>
        </div>
        <el-divider/>
      </div>

      <!--   派单信息-->
      <div v-if="user.designateReceiveTime">
        <div>
          <h3>派单信息</h3>
        </div>
        <div v-if="user.designateReceiveTime">
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="8">
              <span>派单人：{{ user.designateReceiver }}</span>
            </el-col>
            <el-col :span="8">
              <span>联系电话：{{ user.designateAnswerASingleCall }}</span>
            </el-col>
            <el-col :span="8">
              <span>派单时间：{{ user.designateReceiveTime }}</span>
            </el-col>

          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle">
            <el-col :span="8">
              <span>所属单位：{{ user.designateTheUnitToWhichTheOrderBelongs }}</span>
            </el-col>
            <el-col :span="8">
              <span>所属部门：{{ user.designateDepartment1 }}</span>
            </el-col>
          </el-row>
        </div>
        <el-divider/>
      </div>

      <!--        接单信息-->
      <div>
        <div>
          <h3>接单信息</h3>
        </div>
        <div v-if="user.receiveTime">
          <el-row :gutter="20" justify="space-between" align="middle">
            <el-col :span="6">
              <span>接单人：{{ user.receiver }}</span>
            </el-col>
            <el-col :span="6">
              <span>联系电话：{{ user.answerASingleCall }}</span>
            </el-col>
            <el-col :span="6">
              <span>接单时间：{{ user.receiveTime }}</span>
            </el-col>
            <el-col :span="6">
              <span>接单耗时：{{ offerResponse(user.customerTimer, user.receiveTime).showInfo }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle">
            <el-col :span="6">
              <span>所属单位：{{ user.theUnitToWhichTheOrderBelongs|| '--' }}</span>
            </el-col>
            <el-col :span="6">
              <span>所属部门：{{ user.department1|| '--' }}</span>
            </el-col>
<!--            <el-col :span="6">-->
<!--              <span>人员职位：{{ user.personnelPosition|| '&#45;&#45;' }}</span>-->
<!--            </el-col>-->
            <el-col :span="6">
              <span :style="{color: responseTime > 15 ? 'red' : '#39b54a'}">接单是否超时：{{ responseTime > 15 ? '超时' : '正常接单' }}</span>
            </el-col>
          </el-row>
        </div>

        <div class="nameList" v-if="user.workOrderStatus == 0">
          <div class="sort">
            <span  style="color: #e6a23c;font-size: 18px;text-align: center">待接单：--</span>
          </div>
        </div>
        <el-divider/>
      </div>

      <!--        提交审核信息-->
      <div v-if="user.customerHelp == '客户报修抢修' && (user.workOrderStatus == 77 ? user.waitExamineTime : user.receiveTime)">
        <div>
          <h3>提交审核</h3>
        </div>
        <div v-if="user.waitExamineTime">
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="11">
              <span>维修人员：{{ user.proposer || user.ticketUser || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span>维修人员电话：{{ user.applicantTelephoneNumber || '--' }}</span>
            </el-col>
            <el-col :span="4">
              <span>维修人数：{{ user.maintenancePersonnel || '--' }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="11">
              <span>作业基本情况：{{ user.ticketCircumstance || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span>预计到达时间：{{ user.ticketTime || '--' }}</span>
            </el-col>
            <el-col :span="5">
              <span>维修人员部门：{{ user.department || '--' }}</span>

            </el-col>

          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="11">
              <span>作业装备情况：{{ user.ticketEquip || '--' }}</span>
            </el-col>
            <el-col :span="13">
              <span>交通车辆情况：{{ user.ticketCar || '--' }}</span>
            </el-col>
          </el-row>
        </div>

        <div class="nameList" v-if="user.workOrderStatus == 21 && !user.examineTime">
          <div class="sort">
            <span  style="color: #e6a23c;font-size: 18px;text-align: center">待提交审核信息：--</span>
          </div>
        </div>
        <el-divider/>
      </div>

      <div v-if="user.customerHelp == '客户报修抢修' && user.waitExamineTime">
        <div>
          <h3>审批信息</h3>
        </div>
        <div v-if="user.examineTime">

          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="8">
              <span>审批结果：{{
                  user.status == 0 ? '同意' : '拒绝'
                }}</span>
            </el-col>
            <el-col :span="8">
              <span>审批人员：{{ user.assessingOfficer || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span>审批时间：{{ user.examineTime || '--' }}</span>
            </el-col>
            <el-col :span="8" v-if="user.remark">
              <span>审批意见：{{ user.remark || '--' }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="nameList" v-if="user.workOrderStatus == 8 && !user.examineTime">
          <div class="sort">
            <span  style="color: #e6a23c;font-size: 18px;text-align: center">等待审核：--</span>
          </div>
        </div>
        <el-divider/>
      </div>

      <div v-if="user.status == 1 && user.customerHelp == '客户报修抢修' && user.examineTime">
        <div v-if="user.workOrderStatus == 21">
          <div class="sort">
            <span  style="color: red;font-size: 18px;text-align: center">审核不通过,等待重新提交审核</span>
          </div>
        </div>
      </div>

      <div v-if="(user.status == 0 && user.customerHelp == '客户报修抢修' && user.examineTime && !user.closingTime)">
        <div>
          <h3>勘查信息</h3>
        </div>
        <div v-if="user.surveyTime != null">
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="6">
              <span>出发时间：{{ user.investigationTime }}</span>
            </el-col>
            <el-col :span="6">
              <span>到达现场时间：{{ user.investigationOver }}</span>
            </el-col>
            <el-col :span="6">
              <span :style="{color: user.investigationProperty== 1 ? '#39b54a' : 'red'}">是否客户产权：{{ user.investigationProperty== 1?"是" : '不是'}}  </span>
            </el-col>
            <el-col :span="6">
              <span>勘察内容：{{ user.investigationContent}}  </span>
            </el-col>
          </el-row>
          <div class="sort" v-if="user.materialBefore != null">
            <span style="justify-items: center">现场照片：
              <!-- user.investigationImages把返回的数据进行分割,赋值给image -->
            <image-or-file v-model="user.materialBefore"/>
               <image-or-file v-model="user.materialBefore && user.materialBefore.map(r => r.materialBefore).join()"/>
<!--              <div v-for="image in user.materialBefore" style="margin-right: 15px;display: inline-flex;">
                <el-image
                    style="width: 50px; height: 50px"
                    :preview-src-list="user.materialBefore.map((item) => {return item.materialBefore})"
                    :src="image.materialBefore"/>
              </div>-->
            </span>
          </div>
        </div>
        <div class="nameList" v-if="user.workOrderStatus == 9">
          <div class="sort">
            <span  style="color: #e6a23c;font-size: 18px;text-align: center">待勘察：--</span>
          </div>
        </div>
        <el-divider/>
      </div>

      <div v-if="(user.surveyTime) || (user.receiveTime && user.customerHelp != '客户报修抢修')">
        <div>
          <h3>服务方案及报价</h3>
        </div>
        <div v-if="user.offerTime != null">
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="8">
              <span>上传方案时间：{{ user.offerTime || '--'  }}</span>
            </el-col>
            <el-col :span="8">
              <span>耗时：{{ offerResponse(user.surveyTime || user.receiveTime, user.offerTime).showInfo }}</span>
            </el-col>
            <el-col :span="8">
              <span>报价是否超时：{{ offerResponse(user.surveyTime || user.receiveTime, user.offerTime).time > 3 ? '超时' : '未超时'  }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="24">
              <span>方案和报价：</span>
              <image-or-file v-model="user.quotationAudtio"/>
<!--              <span v-if="user.quotationAudtio != null && user.quotationAudtio.length > 6" v-for="item in user.quotationAudtio.split(',')" :key="item">
                <el-image
                  v-if="item.substring(item.lastIndexOf('.')+1, item.length) == 'png' || item.substring(item.lastIndexOf('.')+1, item.length) == 'jpeg' || item.substring(item.lastIndexOf('.')+1, item.length) == 'jpg'"
                  style="width: 50px; height: 50px;margin-right: 10px"
                  :preview-src-list="[item]"
                  :src="item"/>
                   <span v-else-if="item" style="color: #1890ff">
                     <a :href="item">{{item.substring(item.lastIndexOf('/')+1, item.length)}}，</a>
                   </span>
              </span>-->
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="24">
              <span>客户申请资料：</span>
              <image-or-file v-model="user.quotationInformation"/>
<!--              <span v-if="user.quotationInformation && user.quotationInformation.length > 6" v-for="item in user.quotationInformation.split(',')" :key="item">
                <el-image
                  v-if="item.substring(item.lastIndexOf('.')+1, item.length) == 'png' || item.substring(item.lastIndexOf('.')+1, item.length) == 'jpeg' || item.substring(item.lastIndexOf('.')+1, item.length) == 'jpg'"
                  style="width: 50px; height: 50px;margin-right: 10px"
                  :preview-src-list="[item]"
                  :src="item"/>
                   <span v-else-if="item" style="color: #1890ff">
                     <a :href="item">{{item.substring(item.lastIndexOf('/')+1, item.length)}}，</a>
                   </span>
              </span>-->
            </el-col>
          </el-row>
        </div>

        <div class="nameList" v-if="user.workOrderStatus == 1">
          <div class="sort">
            <span  style="color: #e6a23c;font-size: 18px;text-align: center">待报价：--</span>
          </div>
        </div>
        <el-divider/><!--横线-->
      </div>


      <div v-if="user.offerTime">
        <div>
          <h3>签单</h3>
        </div>
        <div v-if="user.signTime != null">
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="8">
              <span style="color: #39b54a">报价金额(元)：{{ user.quotationPrice }}</span>
            </el-col>
            <el-col :span="8">
              <span>上传合同时间：{{ user.signTime || '--'  }}</span>
            </el-col>
            <el-col :span="8">
              <span>耗时：{{ offerResponse(user.offerTime, user.signTime).showInfo  }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="16">
              <span>协议或合同：</span>
              <image-or-file v-model="user.quotationScmor"/>
<!--              <span v-if="user.quotationScmor != null && user.quotationScmor.length > 6" v-for="(item,index) in user.quotationScmor.split(',')" :key="item">
                <el-image
                  v-if="item.substring(item.lastIndexOf('.')+1, item.length) == 'png' || item.substring(item.lastIndexOf('.')+1, item.length) == 'jpeg' || item.substring(item.lastIndexOf('.')+1, item.length) == 'jpg'"
                  style="width: 50px; height: 50px;margin-right: 10px"
                  :preview-src-list="[item]"
                  :src="item"/>
                   <span v-else-if="item" style="color: #1890ff">
                     <a :href="item">{{item.substring(item.lastIndexOf('/')+1, item.length)}}，</a>
                   </span>
              </span>-->
            </el-col>
            <el-col :span="8" v-if="user.materialTime">
              <span>预计复电时间：{{ user.materialTime }}</span>
            </el-col>
          </el-row>
<!--          <div class="sort">-->
<!--            <span>签单是否超时：{{ user.signTime || '&#45;&#45;'  }}</span>-->
<!--          </div>-->
        </div>

        <div class="nameList" v-if="user.workOrderStatus == 98">
          <div class="sort">
            <span  style="color: #e6a23c;font-size: 18px;text-align: center">待上传同：--</span>
          </div>
        </div>
        <el-divider/><!--横线-->
      </div>

      <!-- 客户付款 -->
      <div v-if="user.customerHelp == '客户报修抢修' && user.signTime">
        <div>
          <h3>客户付款</h3>
        </div>
        <div v-if="user.confirmationPaymentTime">
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="8">
              <span>付款时间：{{ user.confirmationPaymentTime   || '--' }}</span>
            </el-col>
<!--            <el-col :span="8">-->
<!--              <span>付款人：{{  user.materialTime  || '&#45;&#45;'  }}</span>-->
<!--            </el-col>-->
            <el-col :span="8">
              <span>付款金额：{{ user.quotationPrice  || '--'  }}元</span>
            </el-col>
            <el-col :span="8">
              <span>付款方式：{{ payList.find(r => r.name == user.paymentMethod).value  || '--'  }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <span>收款方：{{ user.payoutFrom  || '--'  }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="nameList" v-if="user.workOrderStatus == 5">
          <div class="sort">
            <span  style="color: #e6a23c;font-size: 18px;text-align: center">待客户付款：--</span>
          </div>
        </div>

        <el-divider/><!--横线-->
      </div>

      <!-- 完工信息 -->
      <div v-if="user.confirmationPaymentTime || (user.customerHelp != '客户报修抢修' && user.signTime)">
        <div>
          <h3>施工信息</h3>
        </div>
        <div v-if="user.buildTime">
          <div v-if="user.materialInfos && user.materialInfos.length !== 0">
            <div v-for="(item, index) in user.materialInfos">
              <h3 style="color: #e6a23c">第{{index+1}}次施工信息</h3>
              <el-row :gutter="20"  justify="space-between" align="middle" style="padding-bottom: 6px;">
                <el-col :span="12">
                  <span>提交时间：{{ item.createTime   || '--' }}</span>
                </el-col>
                <el-col :span="12" v-if="user.customerHelp == '客户报修抢修'">
                  <span>现场发现故障情况：{{ item.materialIllustrate   || '--' }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" v-if="user.customerHelp != '客户报修抢修'">
                  <span>施工情况说明：{{ item.materialIllustrate   || '--' }}</span>
                </el-col>
                <el-col :span="8" v-if="user.customerHelp == '客户报修抢修'">
                  <span>现场施工完成情况：{{ item.faultCondition   || '--' }}</span>
                </el-col>
<!--                <el-col :span="8" v-if="user.customerHelp == '客户报修抢修'">-->
<!--                  <span>是否涉网涉电报修：{{ item.materialPower == 0 ? '是' : '否'  }}</span>-->
<!--                </el-col>-->
<!--                <el-col :span="8" v-if="item.materialTime && user.customerHelp == '客户报修抢修' && user.materialPower == 0">-->
<!--                  <span>预计恢复供电时间：{{  item.materialTime  || '&#45;&#45;'  }}</span>-->
<!--                </el-col>-->
              </el-row>
              <el-row>
                <el-col :span="12" v-if="user.customerHelp == '客户报修抢修'">
                  <div class="sort" style="margin-bottom: 30px" v-if="item.materialBeforeList != null">
                  <span style="justify-items: center">现场处理前图片：
                    <image-or-file v-model="item.materialBeforeList && item.materialBeforeList.map(r => r.materialBefore).join()"/>
<!--                    <div v-for="image in item.materialBeforeList" style="margin-right: 15px;display: inline-flex;">
                      <el-image
                        style="width: 50px; height: 50px"
                        :preview-src-list="item.materialBeforeList.map((img) => {return img.materialBefore})"
                        :src="image.materialBefore"/>
                    </div>-->
                  </span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="sort" v-if="item.materialAfterList != null">
                  <span style="justify-items: center">{{user.customerHelp == '客户报修抢修' ? '现场处理后图片：' : '验收材料图片'}}
                    <image-or-file v-model="item.materialAfterList && item.materialAfterList.map(r => r.materialAfter).join()"/>
<!--                    <div v-for="image in item.materialAfterList" style="margin-right: 15px;display: inline-flex;">
                      <el-image
                        style="width: 50px; height: 50px"
                        :preview-src-list="item.materialAfterList.map((img) => {return img.materialAfter})"
                        :src="image.materialAfter"/>
                    </div>-->
                  </span>
                  </div>
                </el-col>
              </el-row>

              <el-row v-if="item.evaluationBackup" :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
                <el-col :span="8">
                  <span>评价信息：{{ item.evaluationBackup ? item.evaluationBackup.evaluationInfo : '无'}}</span>
                </el-col>
                <el-col :span="8">
                  <span>评价星级：
                    </span>
                  <el-rate
                    style="display: inline"
                    :value="item.evaluationBackup ? parseFloat(item.evaluationBackup.evaluationStatus) : 0"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}星">
                  </el-rate>
<!--                  <el-rate disabled show-score  text-color="#ff9900" v-model="item.evaluationBackup ? item.evaluationBackup.evaluationStatus : 0"></el-rate>-->
                </el-col>
              </el-row>
            </div>

          </div>


        </div>
        <div class="nameList" v-if="user.workOrderStatus == 3 && !user.buildTime">
          <div class="sort">
            <span  style="color: #e6a23c;font-size: 18px;text-align: center">待施工：--</span>
          </div>
        </div>
        <el-divider/><!--横线-->
      </div>

      <!-- 验收信息，user.evaluationFlag == '0' -->
      <div v-if="user.buildTime">
        <div>
          <h3>验收信息</h3>
        </div>
        <div v-if="user.checkTime || user.evaluationStatus">
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="8">
              <el-row>
                <span>客户评价：
                <el-rate
                  style="display: inline"
                  v-model="user.evaluationStatus"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}星">
                </el-rate></span>
              </el-row>

            </el-col>
            <el-col :span="8">
              <span :style="{color: user.evaluationStatus > 2 ? '#39b54a' : 'red'}">是否通过验收：{{  user.evaluationStatus > 2 ? '是' : '否' }}</span>
            </el-col>
            <el-col :span="8">
              <span>评价内容：{{ user.evaluationInfo  || '--'  }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="nameList" v-if="!user.evaluationStatus && user.workOrderStatus == 4">
          <div class="sort">
            <span  style="color: #e6a23c;font-size: 18px;text-align: center">待客户验收：--</span>
          </div>
        </div>
        <el-divider/>
      </div>

      <!-- 重新上传施工 -->
      <div v-if="user.checkTime || user.evaluationStatus">
        <div v-if="user.workOrderStatus == 3">
          <div class="sort">
            <span  style="color: red;font-size: 18px;text-align: center">验收不通过，待重新上传施工信息：--</span>
          </div>
        </div>
      </div>

      <!-- 验收信息 -->
      <div v-if="user.customerHelp != '客户报修抢修' && user.checkTime">
        <div>
          <h3>财务确认到账</h3>
        </div>
        <div class="nameList" v-if="user.confirmationPaymentTime">
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 6px;">
            <el-col :span="8">
              <div class="sort">
                <span>确认到账时间：{{ user.confirmationPaymentTime   || '--' }}</span>
              </div>
            </el-col>
            <el-col :span="16" v-if="user.payoutFrom">
              <div class="sort">
                <span>收款单位：{{ user.payoutFrom   || '--' }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="user.confirmProof" :gutter="20" justify="space-between" align="middle" style="padding-bottom: 6px;">
            <el-col :span="8">
              <div class="sort">
                <span>收款电子凭证：</span>
                <image-or-file v-model="user.confirmProof"/>
<!--                <el-image
                  v-for="(item,index) in user.confirmProof"
                  :key="index"
                  style="width: 50px; height: 50px;"
                  :src="item.url"
                  :preview-src-list="[item.url]"/>-->
<!--                <span>收款电子凭证：{{ user.confirmProof   || '&#45;&#45;' }}</span>-->
              </div>
            </el-col>
          </el-row>

        </div>
        <div class="nameList" v-if="user.workOrderStatus == 11">
<!--          v-if="userId && finacePerson.find(r => r == userId)"-->
          <div v-if="userId && finacePerson.find(r => r == userId)">
            <el-form ref="sureAccountForm" :model="sureAccountForm" :rules="sureAccountRules" label-width="120px">
              <el-form-item label="到账凭证" prop="confirmProof">
                <imageUpload v-model="sureAccountForm.confirmProof"/>
              </el-form-item>
            </el-form>
            <el-button :loading="buttonLoading" type="primary" @click="sureAccount">确认到账</el-button>
          </div>
          <div class="nameList" v-else-if="finacePerson.length == 0">
            <div class="sort">
              <span  style="color: #39b54a;font-size: 18px;text-align: center">该部门尚未配置财务人员</span>
            </div>
          </div>
          <div class="sort" v-else>
            <span  style="color: #e6a23c;font-size: 18px;text-align: center">待财务确认到账：--</span>
          </div>
        </div>
        <el-divider/>
      </div>

      <!-- 重新上传施工 -->
      <div v-if="user.checkTime || user.evaluationStatus">
        <div v-if="user.workOrderStatus == 4">
          <div class="sort">
            <span  style="color: red;font-size: 18px;text-align: center">已提交施工信息，待客户重新验收</span>
          </div>
        </div>
      </div>

      <!-- 工单完结 -->
      <div v-if="user.workOrderStatus == 7">
        <div>
          <h3>工单完成</h3>
        </div>
        <div class="nameList">
          <div class="sort">
            <span  style="color: #39b54a;font-size: 18px;text-align: center">工单已完成</span>
          </div>
        </div>
      </div>

      <!-- 工单完结 -->
      <div v-if="user.workOrderStatus == 77">
        <div>
          <h3>工单关闭</h3>
        </div>
        <div>
          <el-row :gutter="20" justify="space-between" align="middle" style="padding-bottom: 12px;">
            <el-col :span="8">
              <span>关闭时间：{{ user.closingTime   || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span>关闭原因：{{ user.closeNote  || '--'  }}</span>
            </el-col>
          </el-row>
        </div>
      </div>

    </div>

    <el-dialog :visible.sync="dialogVisible" title="调派信息" width="500px" append-to-body>
      <el-form
          ref="displayRef"
          :model="form"
          :rules="rules"
          label-width="80px"
      >
        <el-form-item label="单位" prop="companyId">
          <treeselect v-model="form.companyId"   @select="changeUnit" :options="frims" :normalizer="normalizer" placeholder="选择服务单位" />
<!--          <el-cascader-->
<!--              ref="unit"-->
<!--              style="width:100%"-->
<!--              v-model="form.companyId"-->
<!--              placeholder="请选择单位"-->
<!--              :options="frims"-->
<!--              :props="{ checkStrictly: true }"-->
<!--              @change="changeUnit"-->
<!--              clearable></el-cascader>-->
        </el-form-item>
        <el-form-item label="人员" prop="customerPlayer">
          <el-select multiple style="width:100%" v-model="form.customerPlayer" placeholder="请选择人员" :loading="bLoad">
            <el-option
                v-for="item in users"
                :key="item.userId"
                :label="`${item.nickName}【${item.userName}】`"
                :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="调派说明" prop="dispatchExplain">
          <el-input
              v-model="form.dispatchExplain"
              type="textarea"
              placeholder="请输入调派说明"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="onSubmitInfo"
          >确 定</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :visible.sync="finance"
               title="财务信息"
               width="70%">

      <div>
        <div>
          <h3>付款信息</h3>
        </div>
        <div class="nameList" v-if="user.params && user.params.evaluation">
          <div class="sort">
            <span>客户评价星级：{{ user.evaluationStatus }}</span>
            <span>是否通过验收：{{ user.params.evaluation.evaluationFlag == '0' ? '是' : 否 }}</span>
            <span>评价内容：{{ user.evaluationInfo }}</span>
          </div>
        </div>
        <div class="nameList" v-else>
          <div class="sort">
            <span>客户评价星级：--</span>
            <span>是否通过验收：--</span>
            <span>评价内容：--</span>
          </div>
        </div>
      </div>
    </el-dialog>


    <el-dialog title="修改手机号码" :visible.sync="showPhone">
      <el-form>
        <el-form-item label="客户联系电话" label-width="120px">
          <el-input v-model="phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showPhone = false">取 消</el-button>
        <el-button type="primary" @click="confirmPhone">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script name="INFO">
import moment from "moment"
import {
  FrimUser,
  Finance,
  designate, getCustomerRepairI, FinanceList, confirmReceipt, updateCustomer
} from '@/api/web/CustomerRepair'
import { getUserProfile } from '@/api/system/user'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listDept } from '@/api/system/dept'
import { handleTree } from '@/utils/ruoyi'
import { getInfo } from '@/api/login'
import { listByIds } from '@/api/system/oss'
import ImageOrFile from '@/components/ImageOrFile'

export default {
  name: "InfoIndex",
  components: { ImageOrFile, Treeselect},
  dicts: ['sys_flag','sys_fp'],
  data() {
    return {
      showPhone: false,
      phone: '',
      sureAccountForm: {
        confirmProof: undefined
      },
      sureAccountRules: {
        confirmProof: [
          { required: true, message: "确认到账凭证不能为空", trigger: "blur" },
        ]
      },
      stepList: [],
      repairStep: [{
        status: '100',
        label: '提交预约',
        timeKey: 'customerTimer',
      },{
        status: '0',
        label: '接单',
        timeKey: 'receiveTime',
      },{
        status: '21',
        label: '提交审核',
        timeKey: 'waitExamineTime',
      },{
        status: '8',
        label: '审核',
        timeKey: 'examineTime',
      },{
        status: '9',
        label: '勘察',
        timeKey: 'surveyTime',
      },{
        status: '1',
        label: '报价',
        timeKey: 'offerTime',
      },{
        status: '98',
        label: '签单',
        timeKey: 'signTime',
      },{
        status: '5',
        label: '付款',
        timeKey: 'confirmationPaymentTime',
      },{
        status: '3',
        label: '施工',
        timeKey: 'buildTime',
      },{
        status: '4',
        label: '验收评价',
        timeKey: 'checkTime',
      },{
        status: '7',
        label: '完成',
        timeKey: 'endTime',
      }],
      repairClose: [{
        status: '100',
        label: '提交预约',
        timeKey: 'customerTimer',
      },{
        status: '0',
        label: '接单',
        timeKey: 'receiveTime',
      },{
        status: '77',
        label: '关闭',
        timeKey: 'closingTime',
      }],
      repairCloseStep: [{
        status: '100',
        label: '提交预约',
        timeKey: 'customerTimer',
      },{
        status: '0',
        label: '接单',
        timeKey: 'receiveTime',
      },{
        status: '21',
        label: '提交审核',
        timeKey: 'waitExamineTime',
      },{
        status: '8',
        label: '审核',
        timeKey: 'examineTime',
      },{
        status: '77',
        label: '关闭',
        timeKey: 'closingTime',
      }],
      noRepairStep: [{
        status: '100',
        label: '提交预约',
        timeKey: 'customerTimer',
      },{
        status: '0',
        label: '接单',
        timeKey: 'receiveTime',
      },{
        status: '1',
        label: '报价',
        timeKey: 'offerTime',
      },{
        status: '98',
        label: '签单',
        timeKey: 'signTime',
      },{
        status: '3',
        label: '施工',
        timeKey: 'buildTime',
      },{
        status: '4',
        label: '验收评价',
        timeKey: 'checkTime'
      },{
        status: '11',
        label: '分账',
        timeKey: 'confirmationPaymentTime'
      },{
        status: '7',
        label: '完成',
        timeKey: 'endTime'
      }],
      sys_fp: [],
      sys_flag: [],
      active: 0,
      user: {},
      dialogVisible: false,
      creatOrderVisible: false,
      buttonLoading: false,
      frims: [],
      users: [],
      bLoad: false,
      selectFrim: '',
      finance: false,
      orderId: '',
      form: {},
      queryParams: {
        customerPlayer: undefined,
        dispatchExplain: undefined,
        companyId: undefined,
      },
      rules: {
        customerPlayer: [
          { required: true, message: "人员ID不能为空", trigger: "change" },
        ],
        dispatchExplain: [
          { required: false, message: "调派说明不能为空", trigger: "change" },
        ],
        companyId: [
          { required: true, message: "单位ID不能为空", trigger: "blur" },
        ],
        customerKey: [{ required: true, message: "主键不能为空", trigger: "blur" }],
      },
      finacePerson: [], // 确认收款的财务人员ids
      payList: [{
        value: '现场支付',
        name: 2,
      },{
        value: '微信',
        name: 0,
      },{
        value: '支付宝',
        name: 1,
      },{
        value: '银行转账',
        name: 3,
      }]
    }
  },
  created() {
    console.log(this.$route.params)
    this.getInfo()
    this.getId(this.$route.params && this.$route.params.tableId)
  },
  computed: {
    responseTime() {
      const diff = moment(moment(this.user.receiveTime)).diff(moment(this.user.customerTimer),'minutes')
      console.log(this, diff)
      return diff
    },
  },
  watch: {
    dialogVisible(newValue) {
        if (newValue) {
          //getAllDepts-js路径
          listDept({ typeId: 3 }).then(response => {
            this.frims = handleTree(response.data.filter(r => r.parentId != 0).filter(r => r.deptName != '超级管理员').filter(r => r.deptName != '信息不全员工').filter(r => r.deptName != '待定位员工').filter(r => r.deptName != '平台客户'), "deptId");
            // this.frims = handleTree(response.data, "deptId");
          });
          // getAllDepts({ parentId: 100 }).then(res => {
          //   const arr = []
          //   res.data.forEach((item, index) => {
          //     if (item.parentId == 100) {
          //       res.data[index].label = item.deptName
          //       res.data[index].value = item.deptId
          //       arr.push(item)
          //     }
          //   })
          //   this.frims = arr
          // })
        }
    },
    selectFrim(newValue) {
        if (newValue !== '' && newValue !== undefined && newValue != null) {
          this.bLoad = true
          FrimUser(this.selectFrim).then(res => {
            this.users = res.rows
            this.bLoad = false
          })
        }
    }
  },

  methods: {
    // 修改联系人电话号码
    editPhone() {
      if (this.user.workOrderStatus != 7 && this.user.workOrderStatus != 77) {
        this.showPhone = true
        this.phone = this.user.liaisonPhone
      } else {
        this.$modal.msgError('已完结工单不能修改')
      }

    },
    confirmPhone() {
      const params = {
        liaisonPhone: this.phone,
        customerKey: this.user.customerKey,
      }
      updateCustomer(params)
        .then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.showPhone = false;
          this.getId(this.user.customerKey)
        })
        .finally(() => {
          this.showPhone = false;
        });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    offerResponse(startTime, endTime) {
      const diff = moment(moment(endTime)).diff(moment(startTime))
      const info = moment(moment(endTime)).diff(moment(startTime), 'days')
      let time = diff
      time = moment(moment(endTime)).diff(moment(startTime))
      var days = parseInt(time / (1000 * 60 * 60 * 24));
      var hours = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = (time % (1000 * 60)) / 1000;
      time = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 "
      // console.log(time/60,days,hours,minutes, seconds)
      return { time: info, showInfo: time}
    },
    getInfo() {
      getInfo().then(res => {
        console.log(res)
        this.userId = res.data.user.userId
        // const user = res.data.user
      }).catch(error => {
      })
    },
    // 获取订单详情
    getId(id) {
      console.log(id, 'wewewewe')
      this.orderId = id  // 订单ID
      getCustomerRepairI(id, this.userId).then(res => {
        this.user = res.data
        if (res.data.customerHelp == '客户报修抢修') {
          this.stepList = this.repairStep
          if (res.data.workOrderStatus == 77) {
            if (res.data.waitExamineTime) {
              this.stepList = this.repairCloseStep
              this.active = this.repairCloseStep.length
            } else {
              this.stepList = this.repairClose
              this.active = this.repairClose.length
            }
          } else {
            this.active = this.repairStep.findIndex(r => r.status == res.data.workOrderStatus)
          }
        } else {
          this.stepList = this.noRepairStep
          this.active = this.noRepairStep.findIndex(r => r.status == res.data.workOrderStatus)
        }
        if (this.user.workOrderStatus == 11) {
          this.getFinacial(this.user)
        }
        if (this.user.confirmProof) {
          this.getFileInfo(this.user.confirmProof, 'confirmProof')
        }
        console.log(this.active)
      })
    },
    getFileInfo(ossId, key) {
      listByIds(ossId).then((r) => {
        // console.log(r, '2222')
        this.user[key] = r.data
      })
    },
    getFinacial(item) {
      FinanceList({customerUnit: item.companyId}).then(async (res) => {
        console.log(res, '222')
        this.finacePerson = res.data
      }).catch(async (err) => {
        console.log(err)
      })
    },
    // 财务确认到账
    sureAccount() {
      /*if (!this.sureAccountForm.confirmProof) {

      }*/
      this.$refs["sureAccountForm"].validate((valid) => {
        if (valid) {
          let params = {
            loginmanId: this.userId,   //当前登录人id
            customer_key:this.user.customerKey,
            confirmProof: this.sureAccountForm.confirmProof
          }
          confirmReceipt(params).then(async (res) => {
            // console.log(res, '222')
            this.$modal.msgSuccess(res.resultMsg);
            this.getId(this.$route.params && this.$route.params.tableId);
          }).catch(async (err) => {
            console.log(err)
          })
        } else {
          return false;
        }
      });
    },
    // 财务显示框
    financeFun() {
      // 查询财务信息
      this.finance = true
      Finance(this.orderId).then(async (res) => {
        console.log(res)
      }).catch(async (err) => {
        console.log(err)
      })
    },

    // 调派显示框
    showModel() {
      this.dialogVisible = true//状态更改为TRUE
    },
    // 调派显示框
    creatOrder() {
       this.creatOrderVisible = true
    },
    cancel() {
      this.creatOrderVisible = false
      this.form = {
        dispatchExplain: null,
        companyId: null,
        customerPlayer: null,
      };
      this.resetForm("displayRef");
    },
    // 调派单位选择变化
     changeUnit(value) {
      console.log(value)
      this.form.customerPlayer = null
      // console.log(typeof value, value.length, value[value.length -1], '值变化') // this.$refs['unit'].getCheckedNodes(),
      if (value && value.length !== 0) {
        let deptId = value.deptId
        FrimUser(deptId).then(res => {
          this.users = res.rows
          console.log(res, 'tttt')
        })
      }
    },
    // 调派提交
     onSubmitInfo() {
      this.$refs["displayRef"].validate((valid) => {
        // console.log(form.form,  route.params,useUserStore().user, '提交的数据')
        if (valid) {
          this.buttonLoading = true;
          getUserProfile().then(res => {
            console.log(res, '223')
            let params = {
              loginmanId: res.data.user.userId,
              customerKey: this.orderId,
              orderStatus: 1,
              customerPlayer: this.form.customerPlayer.join(','),
              companyId: this.form.companyId[this.form.companyId.length - 1]
            }
            console.log(params)
            designate(params)
              .then((response) => {
                if (response.resultCode == 200 || response.code == 200) {
                  this.$modal.msgSuccess("修改成功");
                  this.getId(this.orderId)
                  this.dialogVisible = false
                } else {
                  this.$modal.msgError(`提交调派失败${response.resultCode || response.code}:${response.resultMsg || response.msg}`);
                }
                // getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          })
        }
      });
    },

    // 处理部门数据
     treeData (source, id = 'deptId', parentId= 'parentId', children= 'children', rootId) {
      const newRootId = rootId || (source && source.length > 0 && source[0].parentId) || '100'
      console.log(newRootId, 'r4554545')
      if (source.length !== 0) {
        return source.filter((father) => {
          father.label = father.deptName
          father.value = father.deptId
          const parent = father
          // console.log(parent, parent[id], '数据库')
          // const branchArr = source.filter(child => parent[id] === child[parentId])// 返回每一项的子级数组
          const branchArr = source.filter(child => father.deptId == child.parentId)// 返回每一项的子级数组
          // console.log(branchArr, '哈哈哈')
          if (branchArr.length > 0) {

            parent[children] = branchArr
            // parent.children = branchArr
          } else {
            delete parent[children]
            // delete parent.children// 如果存在子级，则给父级添加一个children属性，并赋值
          }
          // return parent[parentId] === newRootId // 返回第一层
          return parent.parentId == newRootId // 返回第一层
        })
      }
    }
  }
}

</script>

<style scoped>
.ser {
  margin: 20px 10px;
}

.heared {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.err {
  margin: 10px 10px 0 10px;
  background-color: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  padding: 10px 20px;
  border-radius: 6px;
}

.sort {
  display: flex;
  justify-content: flex-start;
}

.nameList {
  width: 70%;
}

.sort span {
  flex: 1;
}

.CenterBox {
  margin: 10px 10px 0 10px;
  background-color: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  padding: 10px 20px;
  border-radius: 6px;
  height: 2600px;
  overflow: scroll;
}

span {
  color: #515a6e;
  height: 40px !important;
  font-size: 13px;
}

.digBox {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
}

.inputBox {
  margin-top: 10px;
}
/deep/ .el-step__description.is-finish {
  color: gray!important
}

/deep/ .el-step__title {
  font-size: 12px!important;
}
/deep/ .el-step.is-center .el-step__description {
  padding-left: 5%;
  padding-right: 5%;
}
</style>
